<template>
  <m-choose-time
    :startOptions="startOptions"
    @startChange="startChange"
    @endChange="endChange"
  ></m-choose-time>
  <br/>
  <!-- 日期选择器 -->
  <m-choose-date
    :disableToday="true"
    :startOptions="startOptions"
    @startChange="dateStartChange"
    @endChange="dateEndChange"
  ></m-choose-date>
</template>

<script lang="ts" setup>
import { ref } from "vue";
interface endValue {
  startTime: string;
  endTime: string;
}

interface dateEndValue {
  startDate: Date;
  endDate: Date;
}
let startChange = (val: string) => {
  console.log(val);
};

let endChange = (val: endValue) => {
  console.log(val);
};
let dateStartChange = (val: Date) => {
  console.log(val);
};

let dateEndChange = (val: dateEndValue) => {
  console.log(val);
};
let startOptions = {
  size: "default",
  clearable: true,
};
</script>
<style lang="scss" scoped></style>
